// 路径管理模块
const path = require("path");
// 生成HTML模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 清除文件模块
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
// 提取css模块
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
    // 入口文件
    entry:{
        app:'./app/js/main.js'
    },
    // 服务
    devServer: {
        // 从(__dirname, "dist"）提供输出内容
        contentBase: path.join(__dirname, "dist"),
        // 所有来自 dist/ 目录的文件都做 gzip 压缩和提供为服务：
        compress: true,
        port: 9000
    },
    // 模块处理
    module:{
        rules:[
            {
                test:/\.html$/,
                loader:"html-loader"
            },
            {
                test:/\.vue$/,
                loader:"vue-loader",
                options: {
                    // 将px转换为rem
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            use: 'css-loader!px2rem-loader?remUni=75&remPrecision=8',
                            fallback: 'vue-style-loader' // <- 这是vue-loader的依赖，所以如果使用npm3，则不需要显式安装
                        }), 
                        scss:ExtractTextPlugin.extract({
                            use: 'css-loader!px2rem-loader?remUni=75&remPrecision=8!sass-loader',
                            fallback: 'vue-style-loader' // <- 这是vue-loader的依赖，所以如果使用npm3，则不需要显式安装
                        }), 
                    },
                    // 将css变为module使用
                    cssModules: {
                        localIdentName: '[path][name]---[local]---[hash:base64:5]',
                        camelCase: true
                    }
                }
            },
            {
                test:/\.scss$/,
                loader:"style-loader!css-loader!sass-loader"
            }
        ]
    },
    plugins: [
        // 清空dist防止缓存
        new CleanWebpackPlugin(['dist']),
        // 生成一个HTML文件
        new HtmlWebpackPlugin({template: './app/views/index.html'}),
        // 开启生产模式
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),
        // 将每个template里的css内容写到一个文件，然后引入
        new ExtractTextPlugin("style.css")
    ],
    // 输出文件
    output:{    
        filename:'[name].mian.js',
        path:path.resolve(__dirname,'dist')
    },
    resolve: {
        // 使用完整版的vue
        alias: {
          'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
        }
    }
}